<template>
  <view class="shift-duty-item">
    <view>
      <view class="shift-duty-hd">
        <image src="/static/images/duty-record/duty-record-icon.png" />
        <text>汇报时间：{{ data.reportTime | reportTime }}</text>
      </view>
      <view class="shift-duty-row">
        <text>10KV顾宜线/檀树溪电压:</text><text>{{ data.gyVoltage }}V</text>
      </view>
      <view class="shift-duty-row">
        <text>主控室直流屏电压:</text><text>{{ data.mainControlRoomVoltage }}V</text>
      </view>
      <view class="shift-duty-row">
        <text>生产情况:</text><text>{{ data.productionSituation }}</text>
      </view>
      <view class="shift-duty-row">
        <text>值班人员:</text><text>{{ data.dutyUserLabel }}</text>
      </view>
      <view class="shift-duty-row">
        <text>接班值班人员:</text><text>{{ data.dutyNextUserLabel }}</text>
      </view>
      <view class="shift-duty-row">
        <text>汇报人:</text><text>{{ data.reportUserLabel }}</text>
      </view>
    </view>
    <view class="shift-duty-bottom">
      <view class="shift-duty-row"> </view>
      <view class="shift-duty-bottom-btn-group">
        <view class="shift-duty-btn shift-duty-btn-active" @click="handleRead">查看</view>
      </view>
    </view>
  </view>
</template>
<script>
import dayjs from 'dayjs'
export default {
  props: {
    data: {
      type: Object,
      default: () => ({}),
    },
    type: {
      type: Number,
      default: 1,
    },
  },
  filters: {
    reportTime(val) {
      return val ? dayjs(val).format('YYYY/MM/DD HH:mm') : '--'
    },
  },
  methods: {
    handleRead() {
      uni.navigateTo({
        url: '/pages/work/duty-record/detail?id=' + this.data.matterId,
      })
    },
  },
  computed: {
    isCurrentMeeting() {
      return this.type === 1
    },
  },
}
</script>
<style lang="scss" scoped>
.shift-duty-item {
  width: 690rpx;
  height: 562rpx;
  background: #ffffff;
  border-radius: 20rpx 20rpx 20rpx 20rpx;
  opacity: 1;
  margin: 0 auto;
  padding: 30rpx 30rpx 20rpx 30rpx;
  font-size: 28rpx;
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
}

.shift-duty-item > view > view {
  display: flex;
  align-items: center;
}

.shift-duty-hd {
  font-weight: bold;
  font-size: 34rpx;
  font-family: PingFang SC-Bold, PingFang SC;
  color: #333333;
  height: 52rpx;
  margin-bottom: 20rpx;
  @include text-overflow-ellipsis(1);

  image {
    width: 52rpx;
    height: 52rpx;
    margin-right: 18rpx;
  }
}

.shift-duty-row {
  color: #999999;
  margin-bottom: 20rpx;

  text {
    display: inline-block;
  }

  text:first-child {
    text-align: right;
    margin-right: 12rpx;
  }

  text:last-child {
    color: #333333;
    flex: 1;
    @include text-overflow-ellipsis(1);
  }
}

.shift-duty-bottom {
  border-top: 1rpx solid #d5d7e3;
  display: flex;
  align-items: center;
  padding-top: 20rpx;
  justify-content: space-between;

  .shift-duty-row {
    margin-bottom: 0;
  }
}

.shift-duty-bottom-btn-group {
  display: flex;
  align-items: center;

  .shift-duty-btn {
    width: 140rpx;
    height: 60rpx;
    border-radius: 32rpx 32rpx 32rpx 32rpx;
    opacity: 1;
    border: 1rpx solid #c87c32;
    font-size: 28rpx;
    color: #c87c32;
    text-align: center;
    line-height: 60rpx;
  }

  .shift-duty-btn-active {
    color: #454a5e;
    border-color: #454a5e;
    margin-right: 20rpx;
  }
}
</style>
